/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect ,useState} from 'react'
import {getList} from "../../../api"
import actions from "../../../store/actions"
import { connect } from 'react-redux'
import "./style.scss"
import { useNavigate } from 'react-router'
import { PullToRefresh } from 'antd-mobile'

const Index=(props:any)=> {
    const {dispatch,tabType} = props
    const [curret,setCurret]=useState(1)
    const [isLoading,setLoading]=useState(true)


    const setList=async()=>{
        if(isLoading){
            setLoading(false)
            const resp=await getList({tabKey:tabType,curret:curret})
            const action=actions.getList(resp.data)
            dispatch(action)
            setLoading(true)
        }
        
    }
    const scroll=(e:any)=>{
        console.log(e)
        const {target:{scrollTop,scrollHeight,clientHeight}}=e
        if(scrollHeight-scrollTop-clientHeight<10){
            setCurret(curret+1)
        }
    }
    const navigate=useNavigate()
    const toDetail=(id:any)=>{
        navigate(`/detail/${id}`)
    }

    
    useEffect(()=>{
        console.log(tabType)
        setList()
    },[tabType,curret])
    const {list}=props



    return (
        <div className="wrapper" onScroll={(e)=>scroll(e)}>
            <PullToRefresh   >
            {
                list.map((v:any,i:any)=>{
                    return(
                        <dl key={i} onClick={()=>toDetail(v.id)}>
                            <dt><img src={v.img} alt="" /></dt>
                            <dd>
                                <h3>{v.title}</h3>
                                <p>{v.desc}</p>
                            </dd>
                        </dl>
                    )
                })
            }
        </PullToRefresh>
        </div>
    )
}
// return(
//     <dl key={i}>
//         <dt><img src={v.img} alt="" /></dt>
//         <dd>{v.title}</dd>
//     </dl>
// )

const mapStateToProps = (state:any) => {
    return {
        ...state
    }
}
const mapDispatchToProps = (dispatch:any) => {
    return{
        dispatch
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Index)